<template>
	<view>
		<u-tabs :list="cateList" itemStyle="width:30%;height:50px" :scrollable="false" @click="clickTab"></u-tabs>


		<view class="equip-container" v-show="cate === 'equip'" style="margin-top: 50px;">
			<u-grid :col="3" border>
				<u-grid-item v-for="(item,i) in equipList" :key="i" @click="handleToEquip">
					<image :src="item.picture" style="width: 100px;" mode="widthFix"></image>
					<view class="grid-text">{{item.equipName}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="trainer-container" v-show="cate === 'trainer'" style="margin-top: 50px;">
			<u-grid :col="3" border>
				<u-grid-item v-for="(item,i) in trainerList" :key="i" @click="handleToTrainer">
					<image :src="item.avatar" style="width: 100px;" mode="widthFix"></image>
					<view class="grid-text">{{item.trName}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="region-container" v-show="cate === 'region'" style="margin-top: 50px;">
			<u-grid :col="3" border>
				<u-grid-item v-for="(item,i) in regionList" :key="i" @click="handleToRegion">
					<image :src="item.picture" style="width: 100px;" mode="widthFix"></image>
					<view class="grid-text">{{item.regionName}}</view>
				</u-grid-item>
			</u-grid>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateList: [{
					name: '器械',
					value: 'equip'
				}, {
					name: '教练',
					value: 'trainer'
				}, {
					name: '区域',
					value: 'region'
				}],
				equipList: [],
				trainerList: [],
				regionList: [],
				cate: '',
			};
		},
		onLoad(options) {
			this.getEquipList()
			this.getTrainerList()
			this.getRegionList()
			console.log(options);
			if (options.cate !== '') {
				console.log(options.cate);
				this.cate = options.cate
			} else {
				this.cate = 'equip'
			}
		},
		methods: {
			async getTrainerList() {
				let {
					data: res
				} = await uni.$http.get("/user/trainer", {
					type: 'all'
				})
				if (res.code === 20000) {
					this.trainerList = res.data
				}
			},
			async getRegionList() {
				let {
					data: res
				} = await uni.$http.get("/user/region")
				if (res.code === 20000) {
					this.regionList = res.data
				}
			},
			async getEquipList() {
				let {
					data: res
				} = await uni.$http.get("/user/equip")
				if (res.code === 20000) {
					this.equipList = res.data
				}
			},
			clickTab(item) {
				this.cate = item.value

			},
			handleToEquip(index) {
				uni.navigateTo({
					url: '/pages/equip/equip?id=' + this.equipList[index].id
				})
			},
			handleToTrainer(index) {
				uni.navigateTo({
					url: '/pages/trainer/trainer?id=' + this.trainerList[index].id
				})
			},
			handleToRegion(index) {
				uni.navigateTo({
					url: '/pages/region/region?id=' + this.regionList[index].id
				})
			}
		}
	}
</script>

<style lang="scss">
	.grid-text {
		text-align: center;
		width: 100px;
		word-break: keep-all;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 28rpx;
		margin-top: 4rpx;
		// color: $u-type-info;
	}
</style>